<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 200px;
            height:100px;
            background: url('./imgs/loading.gif') no-repeat 50% 50%;
        }
        #imglist img.selected{
             border: 5px solid #f00;
             width: 190px;
             height: 90px;
        }
    </style>
</head>
<body>
    <h1>节点操作</h1>
    <hr>

    <div id="imglist">
        <img src="./imgs/Meinv001.jpg" id="pic">
        <img src="./imgs/Meinv002.jpg">
        <img src="./imgs/Meinv003.jpg">
        <img src="./imgs/Meinv004.jpg">
        <img src="./imgs/Meinv005.jpg">
        <img src="./imgs/Meinv006.jpg">
        <img src="./imgs/Meinv007.jpg">
        <img src="./imgs/Meinv008.jpg">
        <img src="./imgs/Meinv009.jpg">
        <img src="./imgs/Meinv010.jpg">
        <img src="./imgs/Meinv011.jpg">
        <img src="./imgs/Meinv012.jpg">
        <img src="./imgs/Meinv013.jpg">
        <img src="./imgs/Meinv014.jpg">
        <img src="./imgs/Meinv015.jpg">
    </div>

    <hr>
    <button onclick="deleteImg()">删除选定的图片</button>
    <button onclick="replaceImg()">替换选定的图片</button>

    <button onclick="appendImg()">追加图片</button>
    <button onclick="insertImg()">指定位置插入图片</button>

    <button onclick="createImg()">创建并追加图片</button>
    <button onclick="cloneImg()">复制图片集合</button>

    <br>
    <br>
    <br>
    <img src="./imgs/Meinv016.jpg" width="200" id="myimg">

    <br>
    <br>
    <br>
    <br>
    
    <script>
        // HTML DOM
        pic.title = '艳艳';
        // XML DOM 1
        pic.setAttribute('title', '静静');
        // XML DOM 2
        var title = document.createAttribute('title');
        title.nodeValue = '翠翠';
        console.log(title);
        pic.setAttributeNode(title);

        // pic.title-hh = '艳艳';// NO

        pic.setAttribute('title-hh', '静静');


        var imgs = imglist.getElementsByTagName('img');
        
        // 选定图片
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                if (this.className == '') {
                    this.className = 'selected';
                } else {
                    this.className = '';
                }
           }
        }

        // 删除选定的图片
        function deleteImg() {
            for (var i = 0; i < imgs.length; i++) {
                // 如果className 的值是selected  则删除
                if (imgs[i].className == 'selected') {
                    imglist.removeChild(imgs[i]);
                    i--;
                }
            }
        }
        // 替换选定的图片
        function replaceImg() {
            for (var i = 0; i < imgs.length; i++) {
                // 如果className 的值是selected  则替换
                if (imgs[i].className == 'selected') {
                    imglist.replaceChild(myimg.cloneNode(), imgs[i]);
                    // 删除该元素对象ID节点
                    imgs[i].removeAttribute('id');
                }
            }
        }

        // 追加图片
        function appendImg() {
            imglist.appendChild(myimg);
        }

        // 指定位置插入图片
        function insertImg() {
            imglist.insertBefore(myimg, imgs[13]);
        }

        // 创建节点
        function createImg() {
            var img = document.createElement('img');
            img.src = './imgs/Meinv017.jpg';
            // console.log(img);
            imglist.appendChild(img);
        }

        //  克隆图片
        function cloneImg() {
            imglist.parentNode.appendChild(imglist.cloneNode(true));
        }


    </script>
</body>
</html>